<template>
	<view class="teacher-home">
		<u-list @scrolltolower="scrolltolower" :height="'100%'"
			style="position: relative">
			<view class="teacher-loading" v-if="loading">
				<u-loading-icon></u-loading-icon>
			</view>
			<view>
				<view class="task-list">
					<view class="teacher-item"
						v-for="(item, index) in tableList" :key="index">
						<view class="item-title">
							<text>{{ item.showMonth }}</text>
						</view>
						<view class="teacher-item-list">

							<view class="teacher-item-item"
								v-for="(task, _index) in item.list"
								:key="task.classCourseId"
								@click="goPublish(task)">
								<uni-swipe-action>
									<uni-swipe-action-item
										:right-options="userInfo.teacherInfo.isSchoolManager ||  task.teacherIndex == userInfo.teacherInfo.userIndex? options : []"
										@click="e => onDeleteClick(task, index, _index)">
										<view>

											<view class="top-box">
												<view class="top-info">
													<view :class="[
                                                'item-type-icon',
                                                task.scope,
                                            ]">
														{{
                                                task.scope == "grade"
                                                    ? "年"
                                                    : "班"
                                            }}
													</view>
													<view class="item-type">
														<view
															class="type-title">
															{{ task.name }} -
															{{ task.courseName }}
														</view>
														<view class="type-info">
															{{ task.typeName }}
														</view>
													</view>
												</view>
												<view :class="[
                                            'publish-icon',
                                            task.publish
                                                ? 'publish'
                                                : 'unpublish',
                                        ]">
												</view>
											</view>
											<view class="grade-class">
												<view class="class-icon"></view>
												{{ task.className }}
											</view>
											<view class="publish-time">
												<view class="time-icon"></view>
												{{ task.showUpdateTime }}
											</view>

										</view>
									</uni-swipe-action-item>
								</uni-swipe-action>
								<!-- 								<view class="item-button">
									{{task.publish ? '公布排名' : '去发布'}}
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-if="tableList.length < 1">
					<u-empty mode="data" :text="'暂无记录'"> </u-empty>
				</view>
			</view>
		</u-list>
		<u-toast ref="uToast"></u-toast>

		<u-modal :show="delVisible" title="删除考试录入" showCancelButton
			@confirm="delSave" @cancel="delCancel">
			<view style="width: 100%">
				<view style="text-align: center; color: #dd524d">
					确认删除该考试录入吗</view>
			</view>
		</u-modal>

		<view class="entry-icon" @click="goAdd"></view>
	</view>
</template>

<script>
	import { teacherPage, inputDelete } from "@/pages/achievement/api/teacher.js"
	import { mapState } from "vuex"
	export default {
		props: {
			filterData: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				loading: true,
				total: 0,
				pageNo: 1,
				pageSize: 10,
				tableList: [],
				params: {},
				delVisible: false,
				delInfo: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		watch: {
			filterData: {
				handler(val) {
					this.params = val
					this.reset()
					this.getList()
				},
				// immediate: true,
				deep: true,
			},
		},
		mounted() {
			// this.getList();
		},
		methods: {
			onDeleteClick(task, index, _index) {
				console.log(task)
				this.delInfo = task
				if (this.delInfo.publish) {
					return this.$refs.uToast
						.show({ message: "该成绩已经发布不能被删除" })
				}
				this.delInfo.index = index
				this.delInfo._index = _index
				this.delVisible = true
			},
			async delSave() {
				try {
					await inputDelete(this.delInfo.classCourseId)
					this.$refs.uToast.show({ message: "删除成功" })
					this.tableList[this.delInfo.index].list.splice(this.delInfo._index, 1)
					this.delCancel()
					// this.getList()
				} catch (e) {
					this.$refs.uToast
						.show({ message: e.message })
					this.delCancel()
					//TODO handle the exception
				}
			},
			delCancel() {
				this.delVisible = false
				this.delInfo = {}
			},
			reset() {
				this.pageNo = 1
				this.tableList = []
				this.showNoMore = false
			},
			async getList() {

				const {
					scaleActive: scope,
					typeActive: type,
					courseActive: courseId,
					statusActive: publish,
					classId,
				} = this.params
				const data = {
					// scope,
					// type,
					// courseId,
					// classId,
					pageSize: this.pageSize,
					pageNo: this.pageNo,
				}
				if (publish === true || publish === false) {
					data.publish = publish
				}
				if (scope) {
					data.scope = scope
				}
				if (type) {
					data.type = type
				}
				if (courseId) {
					data.courseId = courseId
				}
				if (classId) {
					data.classId = classId
				}
				console.log(data.pageNo)
				try {
					this.loading = true
					const resp = await teacherPage(data)

					const { data: respData } = resp
					if (this.tableList.length > 0) {
						let list = []
						for (let item of this.tableList) {
							const monthList = this.tableList.concat(
								list).map(
								item => item.month)
							for (let ite of respData?.list) {
								if (item.month == ite.month) {
									// item.list  = item.list.concat(ite.list)
									for (let i of ite.list) {
										item.list.push(i)
									}
								} else {
									if (!monthList.includes(ite
											.month)) {
										list.push(ite)
									}
								}
							}
						}
						for (let item of list) {
							this.tableList.push(item)
						}
						list = []
					} else {
						let list = []
						if (respData?.list) {
							for (const item of respData?.list) {
								list.push(item)
							}
						}
						for (let item of list) {
							this.tableList.push(item)
						}
						list = []
					}
					this.total = respData?.total
					this.loading = false
				} catch (e) {
					//TODO handle the exception
					this.loading = false
				}
			},
			scrolltolower() {
				console.log(1)
				this.pageNo += 1
				const page = Math.ceil(this.total / this.pageSize)
				if (this.pageNo > page) {
					if (!this.showNoMore) {
						this.showNoMore = true
						return this.$refs.uToast
							.show({ message: "没有更多成绩了" })
					}
				} else {
					this.getList()
				}
			},

			goAdd() {
				uni.navigateTo({
					url: `/pages/achievement/pages/teacher/addTest`,
				})
			},
			goPublish(task) {
				uni.navigateTo({
					url: `/pages/achievement/pages/teacher/entry?classCourseId=${task.classCourseId}`,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.teacher-home {
		height: 100%;
		overflow-y: scroll;

		.teacher-loading {
			margin-top: 150rpx;
		}

		.task-list {
			position: relative;
			min-height: 100rpx;
			padding: 0 30rpx;

			.type-filter {
				position: absolute;
				right: 24rpx;
				top: 20rpx;
			}
		}

		.item-title {
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&>text {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.teacher-item-item {
			box-sizing: border-box;
			height: calc(330rpx - 88rpx);
			background: #fafafa;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;

			.top-box {
				width: 100%;
				height: 102rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 4rpx;

				.item-type-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 0px 24rpx 0px 24rpx;
					text-align: center;
					line-height: 80rpx;
					color: #ffffff;
					font-weight: 600;
					font-size: 34rpx;
					margin-right: 16rpx;
				}

				.grade {
					background: #4174fd;
				}

				.class {
					background: #ff8948;
				}
			}

			.top-info {
				display: flex;
				justify-content: flex-start;
			}

			.type-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				height: 42rpx;
				line-height: 42rpx;
				margin-bottom: 4rpx;
				width: 420rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.type-info {
				height: 36rpx;
				font-size: 26rpx;
				color: #999999;
				line-height: 36rpx;
			}

			.publish-icon {
				width: 108rpx;
				height: 102rpx;
			}

			.publish {
				background: url("@/pages/achievement/static/img/publish.jpg") 0 0 no-repeat;
				background-size: 100% 100%;
			}

			.unpublish {
				background: url("@/pages/achievement/static/img/unpublish.jpg") 0 0 no-repeat;
				background-size: 100% 100%;
			}

			.grade-class,
			.publish-time {
				height: 36rpx;
				font-size: 26rpx;
				color: #999999;
				line-height: 36rpx;
				margin-bottom: 16rpx;
				padding-left: 96rpx;
				display: flex;
			}

			.class-icon {
				width: 36rpx;
				height: 36rpx;
				background: url("@/pages/achievement/static/img/grade.jpg") 0 0 no-repeat;
				background-size: 100% 100%;
				margin-right: 8rpx;
			}

			.time-icon {
				width: 36rpx;
				height: 36rpx;
				background: url("@/pages/achievement/static/img/time.jpg") 0 0 no-repeat;
				background-size: 100% 100%;
				margin-right: 8rpx;
			}

			.item-button {
				height: 88rpx;
				box-shadow: 0px 0.5px 0px 0px #e5e5e5 inset;
				margin-top: 24rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
				color: #4174fd;
			}
		}

		.entry-icon {
			position: fixed;
			right: 16rpx;
			bottom: 204rpx;
			width: 172rpx;
			height: 92rpx;
			background: url("@/pages/achievement/static/img/entry_icon.png") 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}
</style>
